<template>
  <el-card
      class="box-card"
      shadow="hover"
  >
    <div id="applyFormWrapper">
      <h1>数据上线申请</h1>
      <el-form ref="form" :disabled="formData.id!=null" :model="formData" label-width="100px" size="mini">
        <el-form-item label="应用">
          <el-select v-model="formData.appName" :disabled="$route.query.appName!=null" placeholder="请选择"
                     style="width: 100%"
                     @change="loadDatabases()"
          >
            <el-option v-for="item in appList" :key="item.appName"
                       :label="item.appShowName"
                       :value="item.appName"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="数据库">
          <el-select v-model="formData.database" data-key="id" placeholder="请选择" style="width: 100%">
            <el-option v-for="item in databaseList" :key="item.id"
                       :label="item.name"
                       :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="数据脚本">
          <el-input v-if="!checked" v-model="sqlScript" :autosize="{ minRows: 10, maxRows: 200 }" type="textarea"/>

          <el-table v-if="checked" :data="sqlTaskItemList" :expand-row-keys="['FAIL']" :row-key="(row)=>row.state.code"
                    border size='mini' style="width: 100%">
            <el-table-column label="类型" prop="type.name" width="100"/>
            <el-table-column label="表名" prop="tableName"/>
            <el-table-column label="校验" prop="state.name" width="100">
              <template slot-scope="scope">
                <el-tag :type="scope.row.state.code=='SUCCESS'?'success':'danger'" size="mini">{{
                    scope.row.state.name
                  }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="错误" prop="resultMsg" width="200"/>
            <el-table-column label="脚本" style="padding: 0px" type="expand">
              <template slot-scope="props">
                <el-input :value="props.row.sqlScript" autosize readonly type="textarea"/>
              </template>
            </el-table-column>
          </el-table>

        </el-form-item>
        <el-form-item label="申请说明">
          <el-input v-model="formData.remark" maxlength="200" rows="2" show-word-limit type="textarea"/>
        </el-form-item>
        <el-form-item v-if="formData.id==null">
          <el-button v-if="checked" size="mini" type="warning" @click="onResetScript">重新编辑</el-button>
          <el-button size="mini" type="primary" @click="onSubmit">提交
          </el-button>
        </el-form-item>
      </el-form>
      <FlowAuditList :formData="formData"/>
    </div>
  </el-card>
</template>
<script>
import {applyDetailApi, submitApplyApi} from "@/api/apply";
import {appListApi, databaseInstanceListApi} from "@/api/manage";
import {checkSqlApi} from "@/api/database";
import FlowAuditList from "@/view/apply/applyForm/components/FlowAuditList";

export default {
  props: {
    applyId: [Number]
  },
  data() {
    return {
      sqlScript: "",
      checked: false,
      databaseList: [],
      sqlTaskItemList: [],
      appList: [],
      formData: {},
    };
  },
  components: {FlowAuditList},
  methods: {
    async loadDatabases() {
      this.databaseList = await databaseInstanceListApi(this.formData.appName);
    },
    async onCheck() {
      this.sqlTaskItemList = await checkSqlApi(this.sqlScript);
      this.checked = true;
    },
    onResetScript() {
      this.checked = false;
    },
    async onSubmit() {
      if (!this.checked) {
        await this.onCheck();
      }
      if (!this.checked || this.sqlTaskItemList.length == 0
          || this.sqlTaskItemList.filter(i => i.state.code != 'SUCCESS').length > 0
      ) {
        return;
      }
      this.formData.flowName = "data_deploy";
      this.formData.applyTitle = "数据上线-" + this.formData.appName;
      this.formData.applyFormData = {
        databaseId: this.formData.database.id,
        databaseName: this.formData.database.name,
        sqlScript: this.sqlScript,
      }
      await submitApplyApi(this.formData);
      this.$message({
        message: `提交申请成功`,
        type: "success",
      });
      this.$router.go(-1);
    }
  },
  async created() {
    this.appList = await appListApi();
    if (this.applyId) {
      this.formData = await applyDetailApi(this.applyId);
      this.formData.database = {
        id: this.formData.applyFormData.databaseId,
        name: this.formData.applyFormData.databaseName
      }
      this.sqlScript = this.formData.applyFormData.sqlScript;
      this.checked = true;
      await this.onCheck();
    } else if (this.$route.query.appName) {
      this.formData.appName = this.$route.query.appName;
    }

    if (this.formData.appName) {
      await this.loadDatabases();
    }
  }
};
</script>
<style scoped>
#applyFormWrapper {
  width: 800px;
  margin: 0 auto;
  text-align: center;
}

#applyFormWrapper h1 {
  margin: 20px;
}

#applyFormWrapper .el-timeline {
  text-align: left;
  margin-left: 100px;
  margin-top: 30px;
}

#applyFormWrapper .stepName {
  color: #303133;
}

#applyFormWrapper /deep/ .el-table__expanded-cell {
  padding: 0px;
}
</style>
